<template>
  <div class="aside">
    <el-menu
      :default-active="currentRoute"
      class="el-menu-vertical-demo"
      :collapse="isShow"
      @open="handleOpen"
      @close="handleClose"
      router
    >
      <h3 class="title">哈哈</h3>
      <!-- <el-sub-menu index="1-4">
        <template #title><span>item four</span></template>
        <el-sub-menu>
          <template #title><span>item four-1</span></template>
          <el-menu-item>感受感受</el-menu-item>
          <el-menu-item>感受感受</el-menu-item>
        </el-sub-menu>
      </el-sub-menu> -->
      <template v-for="(route, index) in processedLayoutRoutes" :key="index">
        <!-- 有子菜单的情况下 -->
        <template v-if="route.title">
          <el-sub-menu :index="route.title">
            <!-- 菜单标题 -->
            <template #title>
              <el-icon><GoodsFilled /></el-icon>
              <span>{{ route.title }}</span>
            </template>
            <!--分为有二级菜单和三级菜单两种情况 -->
            <!-- 二级菜单情况 -->
            <template v-for="(child, index) in route.children" :key="index">
              <el-menu-item :index="child.path">
                <template #title>
                  <span>{{ child.meta.title }}</span>
                </template>
              </el-menu-item>
            </template>
            <!-- 三级菜单情况 -->
            <template v-if="route.level3">
              <template v-for="(group, index) in route.level3">
                <el-sub-menu :index="group.title">
                  <template #title
                    ><span>{{ group.title }}</span></template
                  >
                  <template v-for="(child, index) in group.children" :key="index">
                    <el-menu-item :index="child.path">
                      <el-icon><GoodsFilled /></el-icon>
                      <template #title>{{ child.meta.title }}</template>
                    </el-menu-item>
                  </template>
                </el-sub-menu>
              </template>
            </template>
          </el-sub-menu>
        </template>
        <!-- 没有子菜单的情况下 -->
        <template v-if="!route.title && !route.meta.level">
          <el-menu-item :index="route.path">
            <el-icon><GoodsFilled /></el-icon>
            <template #title>{{ route.meta.title }}</template>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted, onUnmounted } from "vue";
// 引入pinia
import { storeToRefs } from "pinia";
// 引入store
import { useHomeStore } from "@/stores/home";
import { useRouter, useRoute } from "vue-router"; // 路由信息对象

const homeStore = useHomeStore();
const { isShow } = storeToRefs(homeStore);

// 获取路由信息
const router = useRouter();
const route = useRoute();
const routes = router.getRoutes();
console.log(routes, "路由表");

// 过滤出路径以 "/layout/" 开头的路由
const layoutRoutes = routes.filter((route) => route.path.startsWith("/layout/"));
// 状态变量用来控制当前激活菜单项
const currentRoute = ref(route.path);
console.log(layoutRoutes, "过滤后的路由表", currentRoute.value, "当前激活菜单项");

// 将 processedLayoutRoutes 变成响应式
const processedLayoutRoutes = ref([]);

// 处理有子菜单的情况
const parentGroups = {};
layoutRoutes.forEach((item) => {
  if (item.meta && item.meta.parent) {
    const parentKey = item.meta.parent;
    if (!parentGroups[parentKey]) {
      parentGroups[parentKey] = {
        title: parentKey,
        children: [],
      };
    }
    parentGroups[parentKey].children.push(item);
  }
});

const groupedRoutes = Object.values(parentGroups);
processedLayoutRoutes.value = [
  ...layoutRoutes.filter((item) => !item.meta?.parent),
  ...groupedRoutes,
];
console.log(processedLayoutRoutes.value, "处理后的路由表");

const layoutRoutes2 = routes.filter((route) => route.path.startsWith("/layout/"));
const firstLevelGroups = {};
layoutRoutes2.forEach((item) => {
  const { level, menuName } = item.meta || {};
  if (level) {
    if (!firstLevelGroups[level]) {
      firstLevelGroups[level] = {
        title: level,
        children: [],
      };
    }
    if (menuName) {
      let secondLevelGroup = firstLevelGroups[level].children.find(
        (group) => group.title === menuName
      );

      if (!secondLevelGroup) {
        secondLevelGroup = {
          title: menuName,
          children: [],
        };
        firstLevelGroups[level].children.push(secondLevelGroup);
      }
      secondLevelGroup.children.push(item);
    } else {
      firstLevelGroups[level].children.push(item);
    }
  }
});

const processedLayoutRoutes2 = Object.values(firstLevelGroups);
console.log(processedLayoutRoutes2, "处理后的三级菜单路由表2");

processedLayoutRoutes2.forEach((item2) => {
  const matchingItem = processedLayoutRoutes.value.find((item1) => item1.name === item2.name);
  if (matchingItem) {
    matchingItem.level3 = item2.children;
  }
});
console.log(processedLayoutRoutes.value, "处理后的路由表3");

// 菜单点击事件
const handleClose = (key) => {
  console.log(`关闭${key}`);
};
const handleOpen = (key) => {
  console.log(`打开${key}`);
};
// 菜单项点击事件
const itemClick = (index) => {
  console.log(`菜单项被点击`, index);
};

onMounted(() => {});
onUnmounted(() => {});
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  text-align: center;
}
.aside {
  .title {
    color: #fff;
    margin-top: 10px;
  }
}
/* 样式穿透 */
:deep(.el-sub-menu__title) {
  color: #bbbdbe !important;
}
:deep(.el-menu-item) {
  color: #cacbcf !important;
}
:deep(.el-menu-item.is-active) {
  /* color: #2d8cf0 !important; */
  background-color: blue !important;
}
:deep(.el-menu) {
  background-color: #02223f;
  /* 去掉边框 */
  border: none;
}
:deep(.el-sub-menu__title:hover) {
  color: #ce2323 !important;
  background-color: #02223f;
}
:deep(.el-menu-item:hover) {
  /* color:#FFF !important; */
  background-color: #02223f;
}
</style>
